<template>
  <div>
    <h1>父子通讯</h1>
    <TestComp :count="count" @change-count="handleChangeCount"/>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import TestComp from './components/TestComp.vue';

/**
 * vue3父传子
 * 1. 父组件提供数据
 * 2. 传数据给子组件
 * 3. defineProps接收
 * 4. 渲染父组件的传过来的数据
 *      props: {
 *        count: {
 *          xxx
 *        }
 *      }
 *      this.count
 *    vue3中没有this
 */
const count = ref(0)
const handleChangeCount = (val) => {
  console.log('儿子给我的数据', val);
  count.value = val;
}
</script>

<style lang="scss" scoped>

</style>